<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <a href="./hash.html">实例一</a>
    <a href="../../../index.html">返回</a>
    <hr>
    <button id="a">A</button>
    <button id="b">B</button>
    <button id="c">C</button>

    <button id="d">D</button>
    <button id="e">E</button>
    <button id="f">F</button>


    <div id="contABC"></div>
    <div id="contDEF"></div>
    <script>
        let aa = document.getElementById("a")
        let bb = document.getElementById("b")
        let cc = document.getElementById("c")
        let dd = document.getElementById("d")
        let ee = document.getElementById("e")
        let ff = document.getElementById("f")
        let contABC = document.getElementById("contABC")
        let contDEF = document.getElementById("contDEF")

        function getHash() {
            if (location.href.indexOf("?") != -1) {
                return location.href.split("?")[1]
            } else {
                return ""
            }
        }
        function loadWindow() {
            let hash = getHash()
            if (hash == "") {
                hash = "ABC&DEF"
                history.pushState({}, "title", "?" + hash)
                contABC.innerHTML = location.href
                contDEF.innerHTML = location.href
            } else {
                let abc = hash.split("&")[0]
                let def = hash.split("&")[1]
                contABC.innerHTML = abc
                contDEF.innerHTML = def
            }
        }
        function setHash() {
            let hash = getHash()
            if (hash == "") {
                loadWindow()
            } else {
                if (hash.indexOf(this.innerHTML) == -1) {
                    console.log(hash);
                    hash = hash.split("&")
                    if ("ABC".indexOf(this.innerHTML) != -1) {
                        hash = hash[0] + this.innerHTML + "&" + hash[1]
                    } else {
                        hash = hash[0] + "&" + hash[1] + this.innerHTML
                    }
                } else {
                    hash = hash.replace(this.innerHTML, "")
                    console.log(hash);
                }
                console.log(hash);

                contABC.innerHTML = hash.split("&")[0]
                contDEF.innerHTML = hash.split("&")[1]
            }
            history.pushState(this.innerHTML, "title", "?" + hash)
        }
        aa.onclick = setHash
        bb.onclick = setHash
        cc.onclick = setHash
        dd.onclick = setHash
        ee.onclick = setHash
        ff.onclick = setHash
        window.addEventListener("popstate", loadWindow)
        window.addEventListener("hashchange", loadWindow)
        loadWindow()
    </script>
</body>

</html>